<script setup lang="ts">
import {
  ref,
  computed,
  watch,
  watchEffect,
  defineProps,
  nextTick,
  onMounted,
  onUnmounted,
  type Ref
} from "vue";
import { useAppStoreHook } from "@/store/modules/app";
import { useAssetsStore } from "@/store/modules/asset";
import {
  delay,
  useDark,
  useECharts,
  type EchartOptions
} from "@pureadmin/utils";

import { xemitter } from "@/utils/mitt";

const assetsStore = useAssetsStore();
const { isDark } = useDark();

defineProps({
  width: {
    type: String as PropType<string>,
    default: "100%"
  },
  height: {
    type: String as PropType<string>,
    default: "250px"
  }
});

const theme: EchartOptions["theme"] = computed(() => {
  return isDark.value ? "dark" : "light";
  // return "dark";
});

const pieChartRef = ref<HTMLDivElement | null>(null);
const { setOptions, resize } = useECharts(pieChartRef as Ref<HTMLDivElement>, {
  theme
});

onMounted(() => {
  nextTick(() => {
    xemitter.on("emitPieData", data => {
      console.log("onPieData", data);
      drawChart(data);
    });
  });
});

onUnmounted(() => {
  xemitter.off("emitPieData");
});

const pieStyle = ref("width: 100%; height: 100%;");

const drawChart = params => {
  // 写一段代码判断参数是否有itemStyle属性,有的话合并属性值，没有的话就直接赋值空对象

  let itemStyle = {};
  let color = [];
  let radius = [];
  let labelLine = {
    show: true
  };
  let emphasis = {};
  let legend = {
    icon: "circle",
    right: true
  };
  const data = params.pieData;
  if (params.pieType === "homePie") {
    itemStyle = {
      borderRadius: 10, //圆角
      borderColor: "#fff",
      borderWidth: 2
    };
    color = ["#e6a23c", "#f56c6c", "#53a7ff"];
    radius = ["40%", "70%"];
    labelLine = {
      show: false
    };
    emphasis = {
      label: {
        show: true,
        fontSize: 40,
        fontWeight: "bold"
      }
    };
    pieStyle.value = "width: 100%; height: 100%;";
    legend.right = false;
  } else {
    itemStyle = {};
    color = ["#e6a23c", "#f56c6c", "#53a7ff", "#73C0DE", "#91CC75"];
    radius = "70%";
    labelLine = {
      show: false
    };
    legend = {
      show: true,
      type: "scroll", // 设置图例为可滚动的
      orient: "vertical",
      right: 10,
      icon: "circle",
      top: "middle"
    };
    pieStyle.value = "width:100%;height:250px;";
  }

  setOptions(
    {
      tooltip: {
        trigger: "item"
      },
      title: {
        text: "资产数值", // 设置标题的文本
        left: "left", // 设置标题的位置
        textStyle: {
          color: "#13c2c2", // 设置标题的颜色
          fontWeight: "normal" // 设置标题的字体粗细
        }
      },
      legend,
      series: [
        {
          name: "资产组数值",
          type: "pie",
          top: "20%",
          radius: radius,
          // center: ["40%", "50%"],
          color: color,
          itemStyle,
          data: data,
          emphasis
        }
      ]
    },
    {
      name: "click",
      callback: params => {
        console.log("click", params);
      }
    },
    // 点击空白处
    {
      type: "zrender",
      name: "click",
      callback: params => {
        console.log("点击空白处", params);
      }
    }
  );
};

watch(
  () => useAppStoreHook().getSidebarStatus,
  () => {
    delay(600).then(() => resize());
  }
);

// 监听 store 中 chartData 的变化
assetsStore.$subscribe((mutation, state) => {
  // 当 chartData 发生变化时，更新图表
  console.log("mutation:", mutation);
  console.log("subscribe get allAssets:", state.allAssets);
});

watchEffect(() => {
  const allAssets = assetsStore.getAllAssets;
  console.log("watchEffect get allAssets:", allAssets);
});
</script>

<template>
  <div ref="pieChartRef" :style="{ height, width }" />
</template>
